
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { setYear, setMonth, setDay } from '../../actions/actionAsyncDemo'
import Year from '../../components/Year';
import Month from '../../components/Month';
import Day from '../../components/Day';

class AsnycDemo extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const props = this.props;

        return (<div>
            <div>
                {this.props.year}年{this.props.month || '-'}月{this.props.day || '-'}日
            </div>
            <div>
                <Year begin={props.begin} end={props.end} year={this.props.year} onChange={this.props.setYear} />年
                <Month year={this.props.year} month={this.props.month} onChange={this.props.setMonth} />月
                <Day year={this.props.year} month={this.props.month} day={this.props.day} onChange={this.props.setDay} />日
            </div>
        </div>);
    }
}

const mapStateToProps = state => state.asyncState;

//第一种方式，使用了redux-thunk
const mapDispatchToProps_1 = (dispatch) => {
    return {
        setYear: (year) => {
            dispatch(setYear(year))//异步，可以dispatch一个方法，是因为redux-thunk，如果不用，这里需要加回调，再dispatch，或者把dispatch传递到方法里面去 xxx(year,dispatch)这样
        },
        setMonth: (month) => {
            dispatch(setMonth(month))//异步
        },
        setDay: (day) => {
            dispatch(setDay(day))//异步
        }
    }
};

//第二种方式，使用了redux-thunk
const mapDispatchToProps_2 = (dispatch) => {
    return bindActionCreators({
        setYear,
        setMonth,
        setDay,
    }, dispatch);
}


//第一种方式，没有使用了redux-thunk
const mapDispatchToProps_3 = (dispatch) => {
    return {
        setYear: (year) => {
            setYear(year)(dispatch)//异步，可以dispatch一个方法，是因为redux-thunk，如果不用，这里需要加回调，再dispatch，或者把dispatch传递到方法里面去 xxx(year,dispatch)这样
        },
        setMonth: (month) => {
            setMonth(month)(dispatch)//异步
        },
        setDay: (day) => {
            setDay(day)(dispatch)//异步
        }
    }
};


//第二种方式，没有使用了redux-thunk
const mapDispatchToProps_4 = (dispatch) => {
    return bindActionCreators({
        setYear: (year) => {
            setYear(year)(dispatch)
            return {
                type: ''
            };
        },
        setMonth: (month) => {
            setMonth(month)(dispatch)//异步
            return {
                type: ''
            };
        },
        setDay: (day) => {
            setDay(day)(dispatch)//异步
            return {
                type: ''
            };
        },
    }, dispatch);
}

const mapDispatchToProps = mapDispatchToProps_4;

export default connect(mapStateToProps, mapDispatchToProps)(AsnycDemo);
